<template>
  <div>
    <!-- 头部 -->
    <van-search
      show-action
      background=" #21b97a"
      placeholder="请输入小区或地址"
    >
      <template #label>
        <span @click="showcityList">上海</span>
      </template>
      <template #left-icon>
        <span @click="showcityList"><van-icon name="arrow-down" /></span>
      </template>
      <template #action>
        <van-icon name="map-marked" color="rgb(249, 246, 246)" size="25" />
      </template>
      <template #left>
        <van-icon name="arrow-left" color="rgb(249, 246, 246)" size="25" />
      </template>
    </van-search>
    <!-- 头部 -->

    <van-tabs
      v-model="active"
      @click="getname"
      title-active-color="#21b97a"
      line-width="0"
    >
      <!-- 1 -->
      <van-tab title="区域" name="1">
        <div v-if="name1 === '1'">
          <van-picker :columns="columns" />
          <div class="duicuo">
            <div class="duicuo1" @click="name1 = '0'"><p>取消</p></div>
            <div class="duicuo2"><p>确认</p></div>
          </div>
        </div>
      </van-tab>
      <!-- 2 -->
      <van-tab title="方式" name="2">
        <div v-if="name1 === '2'">
          <van-picker title="标题" :columns="columns1" />
          <div class="duicuo">
            <div class="duicuo1" @click="name1 = '0'"><p>取消</p></div>
            <div class="duicuo2"><p>确认</p></div>
          </div>
        </div>
      </van-tab>
      <!-- 3 -->
      <van-tab title="租金" name="3">
        <div v-if="name1 === '3'">
          <van-picker title="标题" :columns="columns2" />
          <div class="duicuo">
            <div class="duicuo1" @click="name1 = '0'"><p>取消</p></div>
            <div class="duicuo2"><p>确认</p></div>
          </div>
        </div>
      </van-tab>
      <!-- 4 -->
      <van-tab title="筛选" name="4">
        <van-popup
          v-model="show1"
          position="right"
          :style="{ height: '30%' }"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCityMassage } from '@/api/HomePageajax'
export default {
  data() {
    return {
      localStoragecity: {},
      getCityMassagearr: [],
      show1: '',
      show: false,
      active: '',
      name1: '',
      columns1: ['不限', '整租', '合租'],
      columns2: [
        '不限',
        '1000及一下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-7000',
        '7000及以上'
      ],
      columns: [
        {
          text: '区域',
          children: [
            {
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }]
            },
            {
              text: '温州',
              children: [{ text: '鹿城区' }, { text: '瓯海区' }]
            }
          ]
        },
        {
          text: '地铁',
          children: [
            {
              text: '福州',
              children: [{ text: '鼓楼区' }, { text: '台江区' }]
            },
            {
              text: '厦门',
              children: [{ text: '思明区' }, { text: '海沧区' }]
            }
          ]
        }
      ]
    }
  },
  methods: {
    showcityList() {
      this.$router.push('/citylist')
    },
    getname(name) {
      this.name1 = name
    }
  },
  async created() {
    this.localStoragecity = window.localStorage.getItem('city')
    console.log(this.localStoragecity)
    // console.log(value)
    const res = await getCityMassage({
      id: 'AREA|88cff55c-aaa4-e2e0'
    })
    this.getCityMassagearr = res.body
  }
}
</script>

<style scoped lang="less">
.duicuo {
  line-height: 50px;
  width: 100%;
  height: 50px;
  border-top: 1px solid rgb(241, 239, 239);
  .duicuo2 {
    text-align: center;
    width: 230px;
    height: 50px;
    background-color: #21b97a;
    position: fixed;
    bottom: 254px;
    right: 0;
    color: aliceblue;
  }
  .duicuo1 {
    text-align: center;
    height: 50px;
    width: 140px;
    color: #21b97a;
    font-weight: 400;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: rgb(255, 123, 123);
}
</style>
